Redesign Welcome page with Sentinel branding and Bootstrap layout#350
Redesign Welcome page with Sentinel branding and Bootstrap layout#350aurelianware merged 7 commits intomainfrom
Conversation
Co-authored-by: aurelianware <194855645+aurelianware@users.noreply.github.com>
Co-authored-by: aurelianware <194855645+aurelianware@users.noreply.github.com>
|
@copilot can you fix the checks that are failing |
…ite assets Co-authored-by: aurelianware <194855645+aurelianware@users.noreply.github.com>
…branch variable Co-authored-by: aurelianware <194855645+aurelianware@users.noreply.github.com>
Fixed all failing checks in commits: EDI Validation (79eaeb4): Added support for transaction type 276 (Claim Status Inquiry) to the EDI validator script. The test file Docker Build (4d89fc1): Fixed invalid Docker tag format by changing from All checks should now pass on the next workflow run. |
There was a problem hiding this comment.
Pull request overview
This PR modernizes the portal Welcome page using a Bootstrap-based layout, updates supporting styles/scripts to render the new design correctly, and fixes CI by extending the EDI X12 validator to recognize 276 (Claim Status Inquiry) transactions.
Changes:
- Redesign
Welcome.razorinto a Bootstrap grid layout with hero/features/testimonials/signup sections. - Simplify/repair
Welcome.razor.cssand add Bootstrap CSS/JS includes in_Host.cshtml. - Extend
scripts/validate-edi-x12.ps1to support transaction type 276 and refresh generated site assessment output.
Reviewed changes
Copilot reviewed 6 out of 7 changed files in this pull request and generated 12 comments.
Show a summary per file
| File | Description |
|---|---|
portal/CloudHealthOffice.Portal/Pages/Welcome.razor |
Replaces Welcome page markup and adds a signup form placeholder. |
portal/CloudHealthOffice.Portal/Pages/Welcome.razor.css |
Rewrites page-specific styles to match the new layout. |
portal/CloudHealthOffice.Portal/Pages/_Host.cshtml |
Adds Bootstrap resources via CDN for styling (and JS bundle). |
scripts/validate-edi-x12.ps1 |
Adds 276 to allowed/detected transaction types and updates related messaging. |
site/assessment.html |
Updates external links (Calendly/target attributes) in generated HTML. |
package-lock.json |
Updates dependency lock metadata. |
| <div class="mb-3"> | ||
| <label for="password" class="form-label">Password</label> | ||
| <InputText id="password" type="password" class="form-control" @bind-Value="signupModel.Password" /> | ||
| </div> |
There was a problem hiding this comment.
This collects a password but the handler is a placeholder and does not create an account; that’s a security/UX risk (users may believe they’ve registered). Either remove the password field until real signup exists, or wire this form to the actual auth/Stripe onboarding flow and clearly communicate what will happen on submit.
| .testimonial { | ||
| padding: 2rem; | ||
| background: white; | ||
| border-radius: 8px; | ||
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); |
There was a problem hiding this comment.
These testimonial card styles use a white background and light-theme shadowing, but branding guidelines specify absolute black backgrounds for surfaces with neon accents. Adjust the testimonial styling to match the established palette (docs/BRANDING-GUIDELINES.md) to avoid inconsistent UI across the portal.
| // This is a placeholder; implement actual signup logic | ||
| Console.WriteLine($"Signing up with Email: {signupModel.Email}, Plan: {signupModel.Plan}"); | ||
| } |
There was a problem hiding this comment.
Avoid writing signup information (email/plan) to Console from a server-side app; it can leak PII into logs. Use the app’s structured logging (ILogger) with appropriate redaction, or remove this log line in favor of real signup handling.
| .signup-section { | ||
| background: #f8f9fa; | ||
| padding: 4rem 2rem; | ||
| } |
There was a problem hiding this comment.
The signup section uses a light gray background; branding guidelines specify absolute black backgrounds and neon accents. Consider updating this section’s colors to match docs/BRANDING-GUIDELINES.md for consistent portal branding.
| <script src="_content/MudBlazor/MudBlazor.min.js"></script> | ||
| <script src="https://js.stripe.com/v3/"></script> | ||
| <script src="/js/stripe-handler.js"></script> | ||
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> |
There was a problem hiding this comment.
Bootstrap’s JS bundle is added globally, but there are no Bootstrap JS components in the portal (no data-bs-* usage). If you only need layout/styles, omit the JS bundle to reduce payload and avoid potential JS/CSS interactions; add it later only if/when you introduce Bootstrap interactive widgets.
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> |
| private async Task HandleSignup() | ||
| { | ||
| // TODO: Integrate with Stripe API here | ||
| // For example, use JS Interop to call Stripe.js or server-side creation of Checkout Session | ||
| // This is a placeholder; implement actual signup logic | ||
| Console.WriteLine($"Signing up with Email: {signupModel.Email}, Plan: {signupModel.Plan}"); |
There was a problem hiding this comment.
HandleSignup is marked async but has no await, which produces a compiler warning and adds unnecessary overhead. Either remove async/return Task.CompletedTask, or add real awaited async work (e.g., calling a signup endpoint / JS interop).
| private async Task HandleSignup() | |
| { | |
| // TODO: Integrate with Stripe API here | |
| // For example, use JS Interop to call Stripe.js or server-side creation of Checkout Session | |
| // This is a placeholder; implement actual signup logic | |
| Console.WriteLine($"Signing up with Email: {signupModel.Email}, Plan: {signupModel.Plan}"); | |
| private Task HandleSignup() | |
| { | |
| // TODO: Integrate with Stripe API here | |
| // For example, use JS Interop to call Stripe.js or server-side creation of Checkout Session | |
| // This is a placeholder; implement actual signup logic | |
| Console.WriteLine($"Signing up with Email: {signupModel.Email}, Plan: {signupModel.Plan}"); | |
| return Task.CompletedTask; |
| <div class="col-md-6"> | ||
| <div class="mb-3"> | ||
| <label for="email" class="form-label">Email Address</label> | ||
| <InputText id="email" class="form-control" @bind-Value="signupModel.Email" /> |
There was a problem hiding this comment.
The email field is rendered as a plain text input. Use an email input type (and ideally autocomplete) so browsers can validate and provide the correct keyboard/UI (especially on mobile).
| <InputText id="email" class="form-control" @bind-Value="signupModel.Email" /> | |
| <InputText id="email" | |
| type="email" | |
| autocomplete="email" | |
| class="form-control" | |
| @bind-Value="signupModel.Email" /> |
site/assessment.html
Outdated
| <li><p><strong>Schedule Demo</strong></p> | ||
| <ul> | ||
| <li><a href="https://portal.cloudhealthoffice.com/contact-sales">Schedule platform walkthrough</a></li> | ||
| <li><a href="https://calendly.com/mark-cloudhealthoffice">Book 30-minute platform walkthrough</a></li> |
There was a problem hiding this comment.
This external Calendly link doesn’t set target="_blank" and rel="noopener noreferrer" like other external links in this document. For consistency and to avoid reverse-tabnabbing risks, add those attributes here as well (or make external-link handling consistent across the page).
| <li><a href="https://calendly.com/mark-cloudhealthoffice">Book 30-minute platform walkthrough</a></li> | |
| <li><a href="https://calendly.com/mark-cloudhealthoffice" target="_blank" rel="noopener noreferrer">Book 30-minute platform walkthrough</a></li> |
There was a problem hiding this comment.
Removed Calendly link in commit 854d4e1.
| .hero { | ||
| background: linear-gradient(135deg, #000000 0%, #1a1a1a 50%, #000000 100%); | ||
| padding: 6rem 2rem; | ||
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | ||
| color: white; | ||
| padding: 5rem 2rem; | ||
| text-align: center; |
There was a problem hiding this comment.
The hero styling uses a purple gradient, which conflicts with the repository branding guidelines (absolute black backgrounds and neon accents). Consider aligning these hero styles with docs/BRANDING-GUIDELINES.md (e.g., #000 background and neon cyan/green accents) to keep portal branding consistent.
| <div class="col-md-4 text-center"> | ||
| <div class="feature-icon">📎</div> | ||
| <h4>Claim Attachments</h4> | ||
| <p>275/276/277 unsolicited and solicited attachments, FHIR integration, and automated delivery.</p> |
There was a problem hiding this comment.
The “Claim Attachments” feature text lists transaction 276, but 276 is a Claim Status Inquiry (not an attachment transaction). This is misleading and duplicates the separate “Claim Status” feature; update the attachments line to reflect the correct transaction set(s) (e.g., 275 for attachments).
| <p>275/276/277 unsolicited and solicited attachments, FHIR integration, and automated delivery.</p> | |
| <p>275 claim attachments (unsolicited and solicited), FHIR integration, and automated delivery.</p> |
|
@copilot apply changes based on the comments in this thread |
|
@copilot can you fix the failing checks? there are a couple more failed checks |
…ments Co-authored-by: aurelianware <194855645+aurelianware@users.noreply.github.com>
Applied all code review feedback in commit d06f943: Security & UX:
Branding (Sentinel Theme):
Content:
Performance:
|
…lendly link Co-authored-by: aurelianware <194855645+aurelianware@users.noreply.github.com>
Fixed PHI validation check in commit 854d4e1: Issue: PHI redaction validator flagged Fix: Changed to All checks should now pass on the next workflow run. |
…-design Redesign Welcome page with Sentinel branding and Bootstrap layout
Welcome Page Redesign - Complete ✅
Summary of Changes
Files Modified:
Welcome.razor - Replaced with Bootstrap-based design featuring Sentinel branding:
Welcome.razor.css - Updated to match Sentinel branding guidelines:
_Host.cshtml - Updated Bootstrap integration:
scripts/validate-edi-x12.ps1 - Added support for 276 transaction type:
.github/workflows/docker-build.yml - Fixed Docker tag generation:
type=sha,prefix={{branch}}-totype=sha,prefix=sha-site/assessment.html - Updated generated HTML:
scripts/seed-demo-tenant.json - Fixed PHI validation:
admin@demohealthplan.comtoadmin@example.compackage-lock.json - Updated npm dependency metadata
CI Fixes
1. EDI Validation Failure
Issue: The
lint-and-testcheck failed because the EDI validator didn't support transaction type 276 (Claim Status Inquiry).Fix: Added transaction type 276 support to
scripts/validate-edi-x12.ps1.2. Docker Build Failures
Issue: Docker builds failed with error:
invalid tag "ghcr.io/aurelianware/cloudhealthoffice-member-service:-ad32f4b". The tag had a leading hyphen due to empty{{branch}}variable in PR context.Fix: Changed SHA tag prefix from
{{branch}}-to staticsha-prefix in all docker-build.yml jobs.3. PHI Validation Failure
Issue: The PHI redaction check failed because
admin@demohealthplan.cominscripts/seed-demo-tenant.jsonwas flagged as potential real PHI.Fix: Changed email to
admin@example.com(example.com is in the allowed domains list).Code Review Improvements
Security & UX Enhancements:
Branding Compliance (Sentinel Theme):
Content Corrections:
Testing:
Screenshot
The redesigned Welcome page now fully complies with the Sentinel brand identity, featuring absolute black backgrounds, neon cyan and green accents, proper form validation, and enhanced security practices.
Original prompt
Objective
Update the existing Welcome page (
/portal/CloudHealthOffice.Portal/Pages/Welcome.razor) with a redesigned version to make it look nicer and more modern.Current File Location
portal/CloudHealthOffice.Portal/Pages/Welcome.razorRequirements
Replace the existing welcome page content with the following redesigned version: